{extend name="member/common/main"}

{block name="content"}

<link href="__STATIC__/home/css/vip_form.css" rel="stylesheet"/>
<!-- <script src="__STATIC__/home/js/laydate.js"></script>
<script src="__STATIC__/home/js/citys.js"></script> -->

<!-- <script src="__STATIC__/plugs/require/require.js?ver={:date('ymd')}"></script>
<script src="__STATIC__/admin/app.js?ver={:date('ymd')}"></script>
<script>window.ROOT_URL='__PUBLIC__';</script> -->

<!-- <script type="text/javascript" src="__STATIC__/plugs/layui/layui.js"></script>
<link href="__STATIC__/plugs/layui/css/layui.css" rel="stylesheet"/> -->
<link rel="stylesheet" href="__STATIC__/plugins/layui/css/layui.css" media="all" />
<script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>

<div class="vip_contentmain">
  <div class="vip_content">    
    {include file="member/common/left" /}
    <form class="layui-form"  onsubmit="return false" autocomplete="off" lay-filter="form">
    <div class="information Fright">
      <div class="information_title">个人信息</div>
        <div class="Fleft">

          <div class="layui-form-item">
              <label class="layui-form-label">账号</label>
              <div class="layui-input-block">
                <input type="text" readonly="" disabled="" name="username" value='{$member.username|default=""}' required="required" title="请输入账号" placeholder="请输入账号" class="layui-input disabled">
              </div>
          </div>

          <div class="layui-form-item">
              <label class="layui-form-label">姓名</label>
              <div class="layui-input-block">
                  <input type="text" name="truename" lay-verify="truename" value='{$member.truename|default=""}' required="required" title="请输入姓名" placeholder="请输入姓名" class="layui-input">
              </div>
          </div>

          <div class="layui-form-item">
              <label class="layui-form-label">身份证号码</label>
              <div class="layui-input-block">
                  <input type="text" name="idcard" lay-verify="required|identity" value='{$member.idcard|default=""}' title="请输入身份证号码" placeholder="请输入身份证号码" class="layui-input">
              </div>
          </div>

          <div class="layui-form-item">
              <label class="layui-form-label">手机号码</label>
              <div class="layui-input-block">
                  <input type="text" name="phone" lay-verify="required|phone" value='{$member.phone|default=""}' title="请输入手机号码" placeholder="请输入手机号码" class="layui-input">
              </div>
          </div>
          
          <div class="layui-form-item">
              <label class="layui-form-label">生日</label>
              <div class="layui-input-block">
                  <input name="birth" id='birth' value="{$member.birth|default=''}" placeholder="请选择生日" class="layui-input">
              </div>
          </div>
    
          <div class="layui-form-item">
              <label class="layui-form-label">性别</label>
              <div class="layui-input-block">
                  <select name='sex' lay-verify="sex" required="required" title="请选择性别" class='layui-select full-width'>
                      <option value="">请选择性别</option>
                      {foreach [['id' => 0, 'title' => '未设置'], ['id' => 1, 'title' => '男'], ['id' => 2, 'title' => '女']] as $menu}
                      {eq name='menu.id' value='$member.sex|default=0'}
                      <option selected  value='{$menu.id}'>{$menu.title}</option>
                      {else/}
                      <option  value='{$menu.id}'>{$menu.title}</option>
                      {/eq}
                      {/foreach}
                  </select>
              </div>
          </div>

          {if !empty($areaList)}
          <div class="layui-form-item">
              <label class="layui-form-label">地区</label>
              <div class="layui-input-block">
                  <select name='aid' lay-verify="aid" required="required" title="请选择地区" class='layui-select full-width'>
                      <option value="">请选择地区</option>
                      {foreach $areaList as $menu}
                      {eq name='menu.area_id' value='$member.aid|default=0'}
                      <option selected  value='{$menu.area_id}'>{$menu.spl}{$menu.area_name}</option>
                      {else/}
                      <option  value='{$menu.area_id}'>{$menu.spl}{$menu.area_name}</option>
                      {/eq}
                      {/foreach}
                  </select>
              </div>
          </div>
          {/if}

          <div class="layui-form-item">
              <label class="layui-form-label">头像</label>
              <div class='layui-input-block'>
                  <img id="demo1" data-tips-image src="{$member.avatar|default='/static/admin/theme/default/img/image.png'}"/>
                  <input id="demo2" type="hidden" name="avatar" onchange="$(this).prev('img').attr('src', this.value)" value="{$member.avatar|default=''}" class="layui-input">
                  <button type="button" class="layui-btn layui-btn-sm" id="test1">上传图片</button>
                  <p id="demoText"></p>
              </div>
              <!-- <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                  <img class="layui-upload-img" id="demo1" src="{$member.avatar|default='/static/admin/theme/default/img/image.png'}">
                  <p id="demoText"></p>
                </div>
              </div>  -->
          </div>
          
          <div class="layui-form-item text-center">
              <button id="subtn" lay-submit="" lay-filter="sub" class="layui-btn layui-btn-danger" type='submit'>提交</button>
          </div>
      </div>      
    </div>
    </form>
    <script>
      // window.form.render();
      // window.laydate.render({range: false, elem: '#birth'});
      </script>
  </div>
</div>
{/block}


{block name="script"}
<script type="text/javascript">
layui.use(['layer', 'form', 'upload', 'laydate'], function(){
  var layer = layui.layer
  ,form = layui.form
  ,upload = layui.upload
  ,laydate = layui.laydate;
  
  form.render();
  laydate.render({range: false, elem: '#birth'});
  
  //自定义验证规则
  form.verify({
    truename: function(value){
      if(value.length < 1){
        return '请输入姓名';
      }
    }
    ,idcard: function(value){
      if(value.length < 1){
        return '请输入身份证号码';
      }
    }
    ,phone: function(value){
      if(value.length < 1){
        return '请输入手机号码';
      }
    }
    ,sex: function(value){
      if(value.length < 1){
        return '请选择性别';
      }
    }
    ,aid: function(value){
      if(value.length < 1){
        return '请选择地区';
      }
    }
    ,avatar: function(value){
      if(value.length < 1){
        return '请上传头像';
      }
    }
  });

    //监听提交
  form.on('submit(sub)', function(data){
    delete data.field.file;
      // console.log(data.field);
      // return false;
    $.post('/home/member.index/info', data.field, function(d){
      // console.log(d);
      // return false;
      if(d.code == 1){
        layer.msg(d.msg, {icon:1});
        window.location.href = d.url;
      }else{
        layer.msg(d.msg, {icon:5});
      }
    });
    return false;
  });
  
  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '/admin/up_files/file' //改成您自己的上传接口
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      // console.log(res);
      // return false;
      //如果上传失败
      if(res.code == 0){
        return layer.msg('上传失败');
      }
      //上传成功
        $('#demo2').attr('value', res.url); //图片链接（base64）
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });
});
</script>

{/block}